import React, { useRef, useEffect, useState } from 'react';
import { findDOMNode } from 'react-dom';

import { Button, Card, Col, Input, Form , List, Menu, Dropdown, Row, Select, Tag } from 'antd';
import { LoadingOutlined, PlusOutlined,DownOutlined, EyeOutlined, EditOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
import { connect, history } from 'umi';
import ArticleListContent from './components/ArticleListContent';
import StandardFormRow from './components/StandardFormRow';
import TagSelect from './components/TagSelect';
import OperationModal from './components/OperationModal'
import styles from './style.less';
import {getAuthority} from '@/utils/authority'

const { Option } = Select;
const FormItem = Form.Item;
const pageSize = 10;
const Articles = ({ dispatch, articleList: { list }, loading }) => {
  const [form] = Form.useForm();

  useEffect(() => {
    dispatch({
      type: 'articleList/fetch',
      payload: {
        count: 10,
      },
    });
  }, []);

  const handleFormSubmit = (value) => {
    // eslint-disable-next-line no-console
    form.setFieldsValue({
      search_key: value,
    });
  };
  const handleGoCreate = (id = '') => {
    history.push(`/list/article-list/edit?id=${id}`)
  };
  const fetchMore = () => {
    dispatch({
      type: 'articleList/appendFetch',
      payload: {
        count: pageSize,
      },
    });
  };

  const tags = [
    {
      id: 1,
      name: 'HTML',
    },
    {
      id: 2,
      name: 'JavaScript',
    },
    {
      id: 3,
      name: 'Vue',
    },
    {
      id: 4,
      name: 'React',
    },
    {
      id: 5,
      name: 'Node',
    },
  ];
  const categories = [
    {
      id: 1,
      name: '前端',
    },
    {
      id: 2,
      name: '后端',
    },
    {
      id: 3,
      name: 'ios',
    },
    {
      id: 4,
      name: 'Android',
    },
    {
      id: 5,
      name: '小程序',
    },
  ];
  const views = [
    {
      value: 1,
      label: '小于100',
    },
    {
      value: 2,
      label: '100-500',
    },
    {
      value: 3,
      label: '500-1000',
    },
    {
      value: 4,
      label: '1000-1500',
    },
    {
      value: 5,
      label: '1500-3000',
    },
    {
      value: 5,
      label: '3000以上',
    }
  ];
  const IconText = ({ type, text }) => {
    switch (type) {
      case 'star-o':
        return (
          <span>
            <EyeOutlined
              style={{
                marginRight: 8,
              }}
            />
            {text}
          </span>
        );

      case 'like-o':
        return (
          <span>
            <LikeOutlined
              style={{
                marginRight: 8,
              }}
            />
            {text}
          </span>
        );

      case 'message':
        return (
          <span>
            <MessageOutlined
              style={{
                marginRight: 8,
              }}
            />
            {text}
          </span>
        );

      default:
        return null;
    }
  };
  const formItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 24,
      },
      md: {
        span: 12,
      },
    },
  };
  const loadMore = list.length > 0 && (
    <div
      style={{
        textAlign: 'center',
        marginTop: 16,
      }}
    >
      <Button
        onClick={fetchMore}
        style={{
          paddingLeft: 48,
          paddingRight: 48,
        }}
      >
        {loading ? (
          <span>
            <LoadingOutlined /> 加载中...
          </span>
        ) : (
            '加载更多'
          )}
      </Button>
    </div>
  );
  const authority=getAuthority()
  const menu = (
    <Menu >
      <Menu.Item key={0} style={{width:100,textAlign:'center'}}>
        删除
    </Menu.Item>
    {
      authority.indexOf('admin')>-1?<Menu.Item key={0} style={{width:100,textAlign:'center'}}>
      禁用
  </Menu.Item>:''
    }
      <Menu.Item key={1} style={{width:100,textAlign:'center'}}>
        置顶
    </Menu.Item>
    </Menu>
  );
  return (
    <PageContainer>
      <Card bordered={false}>
        <Form
          layout="inline"
          form={form}
          onValuesChange={() => {
            dispatch({
              type: 'articleList/fetch',
              payload: {
                count: 10,
              },
            });
          }}
        >
          <StandardFormRow
            title="文章分类"
            block
            style={{
              paddingBottom: 11,
            }}
          >
            <FormItem name="category">
              <TagSelect expandable>
                {
                  categories.map(e => (
                    <TagSelect.Option value={e.id} key={e.id}>{e.name}</TagSelect.Option>
                  ))
                }

              </TagSelect>
            </FormItem>
          </StandardFormRow>
          <StandardFormRow title="文章标签" grid>
            <FormItem name="tag" noStyle>
              <Select mode="multiple" placeholder="请选择要查询的文章标签" style={{
                maxWidth: 300,
                width: '100%',
              }}>
                {tags.map((tag) => (
                  <Option key={tag.id} value={tag.id}>
                    {tag.name}
                  </Option>
                ))}
              </Select>
            </FormItem>
          </StandardFormRow>
          <StandardFormRow title="文章标题" grid>
            <FormItem {...formItemLayout} label="" name="search_key">
              <Input
                placeholder="请输入标题"
                style={{
                  width: 300,
                }}
              />
            </FormItem>
          </StandardFormRow>
          <StandardFormRow title="其他选项" grid last>
            <Row >
              <Col xl={8} lg={10} md={12} sm={24} xs={24}>
                <FormItem {...formItemLayout} label="阅读量" name="views">
                  <Select
                    placeholder="不限"
                    style={{
                      width: 150,
                    }}
                  >
                    {
                      views.map((e) => (
                        <Option value={e.value} key={e.value}>{e.label}</Option>
                      ))
                    }

                  </Select>
                </FormItem>
              </Col>
              <Col xl={8} lg={10} md={12} sm={24} xs={24}>
                <FormItem {...formItemLayout} label="点赞量" name="likes">
                  <Select
                    placeholder="不限"
                    style={{
                      width: 150,
                    }}
                  >
                    {
                      views.map((e) => (
                        <Option value={e.value} key={e.value}>{e.label}</Option>
                      ))
                    }
                  </Select>
                </FormItem>
              </Col>
              <Col xl={8} lg={10} md={12} sm={24} xs={24}>
                <FormItem {...formItemLayout} label="评论量" name="comments">
                  <Select
                    placeholder="不限"
                    style={{
                      width: 150,
                    }}
                  >
                    {
                      views.map((e) => (
                        <Option value={e.value} key={e.value}>{e.label}</Option>
                      ))
                    }

                  </Select>
                </FormItem>
              </Col>
            </Row>
          </StandardFormRow>

        </Form>
      </Card>
      <Card
        style={{
          marginTop: 20,
        }}
        bordered={false}
        bodyStyle={{
          padding: '8px 32px 32px 32px',
        }}
        extra={
          <Button
            type="primary"
            style={{
              marginBottom: 8,
            }}
            onClick={handleGoCreate}
          >
            <PlusOutlined />
              添加文章
            </Button>
        }
      >
        <br />

        <List
          size="large"
          loading={list.length === 0 ? loading : false}
          rowKey="id"
          itemLayout="vertical"
          loadMore={loadMore}
          dataSource={list}
          renderItem={(item) => (
            <List.Item
              key={item.id}
              actions={[
                <IconText key="star" type="star-o" text={item.star} />,
                <IconText key="like" type="like-o" text={item.like} />,
                <IconText key="message" type="message" text={item.message} />,
              ]}
              extra={<div className={styles.listItemExtra}>
                <Button type="link" icon={<EditOutlined />} onClick={() => { handleGoCreate(item.id) }}>编辑</Button>
                <Dropdown overlay={menu} trigger={['click']} placement="bottomRight">
                  <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                    更多 <DownOutlined />
                  </a>
                </Dropdown>
              </div>}
            >
              <List.Item.Meta
                title={
                  <a className={styles.listItemMetaTitle} href={item.href}>
                    {item.title}
                  </a>
                }
                description={
                  <span>
                    <Tag>Ant Design</Tag>
                    <Tag>设计语言</Tag>
                    <Tag>蚂蚁金服</Tag>
                  </span>
                }
              />
              <ArticleListContent data={item} />
            </List.Item>
          )}
        />
      </Card>
    </PageContainer>
  );
};

export default connect(({ articleList, loading }) => ({
  articleList,
  loading: loading.models.articleList,
}))(Articles);
